<!--=============================================
=            Breadcrumb Area         =
=============================================-->

<div class="breadcrumb-area breadcrumb-bg pt-85 pb-85 mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="/">Home</a> <span class="separator">/</span></li>
                        <li class="active">Checkout</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=====  End of Breadcrumb Area  ======-->


<!--=============================================
=            Checkout page content         =
=============================================-->

<div class="page-section mb-80">
    <div class="container">
        <div class="row">
            <div class="col-12">

                <!-- Checkout Form s-->
                <form action="{:url('home/order/done')}" method="post" class="checkout-form">
                    <div class="row row-40">
                        <div class="col-lg-7 mb-20">
                            <!-- Billing Address -->
                            <div id="billing-form" class="mb-40">
                                <h4 class="checkout-title">Billing Address</h4>

                                <div class="row">

                                    <div class="col-md-6 col-12 mb-20">
                                        <label>First Name*</label>
                                        <input type="text" name="first_name" placeholder="First Name" required>
                                    </div>

                                    <div class="col-md-6 col-12 mb-20">
                                        <label>Last Name*</label>
                                        <input type="text" name="last_name" placeholder="Last Name" required>
                                    </div>

                                    <div class="col-md-6 col-12 mb-20">
                                        <label>Email Address*</label>
                                        <input type="email" name="email" placeholder="Email Address" required>
                                    </div>

                                    <div class="col-md-6 col-12 mb-20">
                                        <label>Phone no*</label>
                                        <input type="tel" name="phone" placeholder="Phone number" required>
                                    </div>
                                    <div style="display: flex;">
                                        <div style="margin: 15px 15px">
                                            <label>State*</label>
                                            <select name="state" onchange="seleState(this)" style="width: 250px;height: 45px;background-color: #fff;outline: none;border: 1px solid rgb(153, 153, 153);" required>
                                                {volist name='region_list' id='region'}
                                                    <option value="{$region.id}">{$region.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                        <div style="margin: 15px 15px">
                                            <label>City*</label>
                                            <select name="city" id="city" style="width: 250px;height: 45px;background-color: #fff;outline: none;border: 1px solid rgb(153, 153, 153);" required>
                                                {volist name='region_list1' id='region1'}
                                                    <option value="{$region1.id}">{$region1.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label>Address*</label>
                                        <input type="text" name="addr1" placeholder="Address line 1" required>
                                        <input type="text" name="addr2" placeholder="Address line 2">
                                    </div>
                                    <div class="col-12 mb-20">
                                        <label>Note</label>
                                        <input type="text" name="note" placeholder="">
                                    </div>

                                    <!--                                    <div class="col-md-6 col-12 mb-20">-->
                                    <!--                                        <label>State*</label>-->
                                    <!--                                        <input type="text" placeholder="State">-->
                                    <!--                                    </div>-->

                                    <!--                                    <div class="col-md-6 col-12 mb-20">-->
                                    <!--                                        <label>Zip Code*</label>-->
                                    <!--                                        <input type="text" placeholder="Zip Code">-->
                                    <!--                                    </div>-->
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-5">
                            <div class="row">

                                <!-- Cart Total -->
                                <div class="col-12 mb-60">

                                    <h4 class="checkout-title">Cart Total</h4>

                                    <div class="checkout-cart-total">

                                        <h4>Product <span></span></h4>

                                        <ul>
                                            <?php $total_num = 0; ?>
                                            <?php if($list):foreach($list as $goodInfo): ?>
                                            <?php $total_num += $goodInfo['num']; ?>
                                            <li><?php echo $goodInfo['product_title'] ?> X <?php echo $goodInfo['num']; ?> <span> </span></li>
                                            <?php endforeach;endif; ?>
                                        </ul>
                                        <h4> Total<span><?php echo $total_num; ?></span></h4>
                                        <!-- <p>Sub Total <span>${$total}</span></p> -->
                                        <!--                                        <p>Shipping Fee <span>$00.00</span></p>-->
                                       <!-- <h4>Grand Total <span>${$total}</span></h4> -->


                                    </div>
                                    <button class="place-order">Place order</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    function seleState(e) {
        var id = $(e).val();
        if(id>0){
            $.ajax({
                type: "POST",
                url: "{:Url('home/order/region')}",
                timeout: "30000",
                data: {pid:id},
                dataType: "JSON",
                success: function (res) {
                    data = res.data;
                    if (res.code == 1) {
                        $("#city").html(data);
                    } else {
                        alert('Network Failure, Please Refresh And Try Again');
                    }
                },
                error: function () {
                    alert("Request Timeout, Please Refresh And Try Again");
                }
            });
        }
    }
</script>

<!--=====  End of Checkout page content  ======-->


